<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>顺风车页面</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/kuCity.js"></script>

<link rel="stylesheet" type="text/css" href="css/sf/sf.css">	
<link rel="stylesheet" type="text/css" href="css/city/kuCity.css">
</head>
<body>
	<div style="background-color: #1B2B3B">
		<jsp:include page="../NavigationBar.jsp" flush="true"></jsp:include>
	</div>

	<div class="sf_banner">
		<div class="w1190">
			<!-- banner start -->
			<div class="sf_selectCar">
				<p class="sf_title">顺风车</p>
				<div class="sf_selectCarCont">
					<div class="city">
						<label>取车城市</label> <input type="text" maxlength="10"
							value="请选择取车城市" class="carCity" />
					</div>
					<div class="height13"></div>
					<div class="city">
						<label>还车城市</label> <input type="text" maxlength="10"
							value="请选择还车城市" class="carCity" />
						<!--
                            	隐藏的城市列表 
                            -->
						<script>
							$('.carCity').kuCity();
						</script>
					</div>
					<div class="checkLogo">
						<a href="" class="checkLogoImg">查 询</a>
					</div>
				</div>
			</div>
			<!-- banner end -->

			<!-- 空白的div -->
			<div style="height: 90px;"></div>

			<!--
                	left start
                -->
			<div class="sf_left">
				<table width="818px" height="40px" border="0" cellpadding="0"
					cellspacing="0" style="background-color: #EAF6FD;">
					<tbody>
						<tr>
							<td width="455px" class="td0">
								<!--
                            	作者：384587311@qq.com
                            	时间：2017-10-21
                            	描述：这个data的作用是？
                            --> <span class="curr">全部</span>
								<p class="hotCity">
									<span class="curr">北京</span> <span class="curr">广州</span> <span
										class="curr">杭州</span> <span class="curr">上海</span> <span
										class="curr">深圳</span>
								</p>
							</td>
							<td width="275px"
								style="border-top: 1px solid #DBE4EB; border-right: 1px solid #DBE4EB; border-bottom: 1px solid #DBE4EB"></td>
							<td width="85px" align="center"
								style="border-top: 1px solid #DBE4EB; border-right: 1px solid #DBE4EB; border-bottom: 1px solid #DBE4EB; position: relative;">
								<a href="" class="moreCity">更多城市</a>
							</td>
						</tr>
					</tbody>
				</table>

				<div class="sfSearch">
					<span class="carSelection">车型</span> <span class="startDate">取车区间</span>
					<span class="w179">取车→还车</span>
				</div>

				<!--
                    	顺风车列表 start
                    -->
				<ul class="carUl">
					<span class="tip">一口价：含车辆租赁费及门店服务费，基本保险费，手续费</span>
					<li class="carLi">
						<div class="carInformation" style="padding-top: 13px;">
							<img
								src="https://image.zuchecdn.com/newversion/news/order/2015AKL.jpg"
								width="134" height="78" onclick="" style="cursor: pointer;" />
							<br /> 2016别克昂科拉/SUV/1.4T自动
						</div>

						<div class="carDate">
							从 2017年10月23日 <br /> 到 2017年10月27日 <br /> <span
								class="fontBlue">限租期：1天</span>
						</div>

						<div class="carWay">杭州→南京</div>

						<div class="carPrice">
							<em class="rmb">¥</em> <em class="num">100</em>
						</div>

						<div class="carBuy">
							<a href="#" class="">
								<div class="carBuyButton">
									<img src="img/预定.png" /> 马上预定
								</div>
							</a>
						</div>
					</li>
					<li class="carLi">
						<div class="carInformation" style="padding-top: 13px;">
							<img
								src="https://image.zuchecdn.com/newversion/news/order/2015AKL.jpg"
								width="134" height="78" onclick="" style="cursor: pointer;" />
							<br /> 2016别克昂科拉/SUV/1.4T自动
						</div>

						<div class="carDate">
							从 2017年10月23日 <br /> 到 2017年10月27日 <br /> <span
								class="fontBlue">限租期：1天</span>
						</div>

						<div class="carWay">杭州→南京</div>

						<div class="carPrice">
							<em class="rmb">¥</em> <em class="num">100</em>
						</div>

						<div class="carBuy">
							<a href="#" class="">
								<div class="carBuyButton">
									<img src="img/预定.png" /> 马上预定
								</div>
							</a>
						</div>
					</li>
					<li class="carLi">
						<div class="carInformation" style="padding-top: 13px;">
							<img
								src="https://image.zuchecdn.com/newversion/news/order/2015AKL.jpg"
								width="134" height="78" onclick="" style="cursor: pointer;" />
							<br /> 2016别克昂科拉/SUV/1.4T自动
						</div>

						<div class="carDate">
							从 2017年10月23日 <br /> 到 2017年10月27日 <br /> <span
								class="fontBlue">限租期：1天</span>
						</div>

						<div class="carWay">杭州→南京</div>

						<div class="carPrice">
							<em class="rmb">¥</em> <em class="num">100</em>
						</div>

						<div class="carBuy">
							<a href="#" class="">
								<div class="carBuyButton">
									<img src="img/预定.png" /> 马上预定
								</div>
							</a>
						</div>
					</li>
					<li class="carLi">
						<div class="carInformation" style="padding-top: 13px;">
							<img
								src="https://image.zuchecdn.com/newversion/news/order/2015AKL.jpg"
								width="134" height="78" onclick="" style="cursor: pointer;" />
							<br /> 2016别克昂科拉/SUV/1.4T自动
						</div>

						<div class="carDate">
							从 2017年10月23日 <br /> 到 2017年10月27日 <br /> <span
								class="fontBlue">限租期：1天</span>
						</div>

						<div class="carWay">杭州→南京</div>

						<div class="carPrice">
							<em class="rmb">¥</em> <em class="num">100</em>
						</div>

						<div class="carBuy">
							<a href="#" class="">
								<div class="carBuyButton">
									<img src="img/预定.png" /> 马上预定
								</div>
							</a>
						</div>
					</li>
					<li class="carLi">
						<div class="carInformation" style="padding-top: 13px;">
							<img
								src="https://image.zuchecdn.com/newversion/news/order/2015AKL.jpg"
								width="134" height="78" onclick="" style="cursor: pointer;" />
							<br /> 2016别克昂科拉/SUV/1.4T自动
						</div>

						<div class="carDate">
							从 2017年10月23日 <br /> 到 2017年10月27日 <br /> <span
								class="fontBlue">限租期：1天</span>
						</div>

						<div class="carWay">杭州→南京</div>

						<div class="carPrice">
							<em class="rmb">¥</em> <em class="num">100</em>
						</div>

						<div class="carBuy">
							<a href="#" class="">
								<div class="carBuyButton">
									<img src="img/预定.png" /> 马上预定
								</div>
							</a>
						</div>
					</li>
					<li class="carLi">
						<div class="carInformation" style="padding-top: 13px;">
							<img
								src="https://image.zuchecdn.com/newversion/news/order/2015AKL.jpg"
								width="134" height="78" onclick="" style="cursor: pointer;" />
							<br /> 2016别克昂科拉/SUV/1.4T自动
						</div>

						<div class="carDate">
							从 2017年10月23日 <br /> 到 2017年10月27日 <br /> <span
								class="fontBlue">限租期：1天</span>
						</div>

						<div class="carWay">杭州→南京</div>

						<div class="carPrice">
							<em class="rmb">¥</em> <em class="num">100</em>
						</div>

						<div class="carBuy">
							<a href="#" class="">
								<div class="carBuyButton">
									<img src="img/预定.png" /> 马上预定
								</div>
							</a>
						</div>
					</li>
				</ul>
				<!--
                    	顺风车列表 end
                    -->
			</div>
			<!--
                	left end
                -->

			<!--
                	right start
                -->
			<div class="sf_right">
				<div class="Img">
					<img src="https://image.zuchecdn.com/newversion/common/msgBind.jpg" />
				</div>

				<div class="title">
					<h4 style="margin-top: 12px; margin-left: 20px;">顺风车规则</h4>
				</div>

				<div class="sf_rule">
					<table>
						<tbody>
							<tr>
								<td>1.</td>
								<td>顺风车产品需在预订时预付全款，预付后不能退改；</td>
							</tr>
							<tr>
								<td>2.</td>
								<td>顺风车产品，取还城市不能更改；</td>
							</tr>
							<tr>
								<td style="padding-bottom: 16px;">3.</td>
								<td>限租期内，优惠后总金额含车辆租赁费及门店服务费、基本保险费、手续费；</td>
							</tr>
							<tr>
								<td>4.</td>
								<td>如需可选服务，另外计费；</td>
							</tr>
							<tr>
								<td>5.</td>
								<td>超出限制里程，按1元/公里收取超里程服务费；</td>
							</tr>
							<tr>
								<td style="padding-bottom: 46px;">6.</td>
								<td>超出限制租期，需支付超时服务费：超时4小时以内，按小时收取超时服务费，每小时赠送20km里程；超时4小时以上，按正常价格按天收取车辆租赁费及门店服务费、基本保险及可选服务等费用，同时赠送不限里程；</td>
							</tr>
							<tr>
								<td style="padding-bottom: 16px;">7.</td>
								<td>取车或还车时间在21:00-次日8:00之间，每次需支付50元夜间服务费；</td>
							</tr>
							<tr>
								<td>8.</td>
								<td>顺风车产品不与其他优惠活动同时享受。</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!--
                	right end
                -->

			<!-- 
				footmenu start 
			-->
			<div class="zc_footmenu">
				<div class="zc_main">
					<div class="menuFirst">
						<p style="font: 18px; color: #60606C; height: 40px;">租车预订说明</p>
						<a href="" style="margin-left: 0px;">服务时间</a> <a href="">待租车况</a>
						<br /> <a href="">服务预定</a> <a href="">短租产品</a> <br /> <a href="">租车资格</a>
						<a href="">取还车说明</a>
					</div>
					<div style="width: 160px;">&nbsp;</div>
					<div class="menu0" style="width: 70px;">
						<p style="font: 18px; color: #60606C; height: 40px;">会员管理</p>
						<a href="">会员章程</a> <br /> <a href="">会员细则</a> <br /> <a href="">定级积分</a>
					</div>
					<div style="width: 160px;">&nbsp;</div>
					<div class="menu0" style="width: 135px;">
						<p style="font: 18px; color: #60606C; height: 40px;">紧急事务处理</p>
						<a href="">保险责任</a> <a href="">理赔说明</a> <br /> <a href="">事故处理</a>
						<br /> <a href="">救援及备用车</a>
					</div>
					<div style="width: 160px;">&nbsp;</div>
					<div class="menu0" style="width: 132px;">
						<p style="font: 18px; color: #60606C; height: 40px;">租车费用及结算</p>
						<a href="">价格说明</a> <a href="">结算流程</a> <br /> <a href=""
							style="margin-right: 27px;">储值卡</a> <a href="">积分</a>
					</div>
					<div style="width: 160px;">&nbsp;</div>
					<div class="menuLast">
						<p style="font: 18px; color: #60606C; height: 40px;">帮助中心</p>
						<a href="">常见问题</a> <br /> <a href="">新手上路</a> <br /> <a href="">服务规则</a>
					</div>
				</div>
			</div>
			<!--
               	footmenu end
            -->

		</div>
	</div>

</body>
</html>